<template>
	<view>
		<view class="bgwhite" style="position: fixed;z-index: 99;width: 100%;">
			<mytabs style="width: 100%;" :items="list" @selected="onTabSelected"></mytabs>
		</view>
		<view v-if="dataList.length" style="padding-top: 60rpx;">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in dataList" :key="index">
					<view class="card w96">
						<view class="w96 radius20 bgwhite mt20" style="padding: 0 20rpx 20rpx 0rpx;">
							<view v-if="item.is_refund == 2" class="w94"
								style="padding: 30rpx 0 0 30rpx; font-size: 32rpx;">
								待退款
								<view class="small-size" style="padding: 20rpx 0;margin: 0 auto;color: #ccc;">
									退款申请已交由平台处理
								</view>
							</view>
							<view v-else-if="item.is_refund == 3" class="w94"
								style="padding: 30rpx 0 0 30rpx; font-size: 32rpx;">
								退款成功
							</view>
							<view v-else-if="item.is_refund == 4" class="w94"
								style="padding: 30rpx 0 0 30rpx; font-size: 32rpx;">
								退款已驳回
							</view>
							<block v-else>
								<view v-if="item.is_pay == 1" class="w94"
									style="padding: 30rpx 0 0 30rpx; font-size: 32rpx;">
									已结算
									<view class="small-size" style="padding: 20rpx 0;margin: 0 auto;color: #ccc;">
										订单结束
									</view>
								</view>

								<view v-else>
									<view v-if="item.order_status == 1" class="w94"
										style="padding: 30rpx 0 0 30rpx; font-size: 32rpx;">
										已报价
									</view>
									<view v-if="item.order_status == -1" class="w94"
										style="padding: 30rpx 0 0 30rpx; font-size: 32rpx;">
										已取消
									</view>
									<view v-else-if="item.order_status == 2" class="w94"
										style="padding: 30rpx 0 0 30rpx; font-size: 32rpx;">
										待服务
										<view class="small-size"
											style="padding: 20rpx 0rpx;margin: 0 auto;color: #ccc;">
											您已接单，待上门服务
										</view>
									</view>
									<view v-else-if="item.order_status == 2.1" class="w94"
										style="padding: 30rpx 0 0 30rpx; font-size: 32rpx;">
										待服务（催单）
										<view class="small-size" style="padding: 20rpx 0;margin: 0 auto;color: #ccc;">
											您已接单，待上门服务
										</view>
									</view>
									<view v-else-if="item.order_status == 2.2" class="w94"
										style="padding: 30rpx 0 0 30rpx; font-size: 32rpx;">
										施工中
										<view class="small-size" style="padding: 20rpx 0;margin: 0 auto;color: #ccc;">
											等待您施工完成
										</view>
									</view>
									<view v-if="item.order_status==3&& item.is_pay==0" class="w94"
										style="padding: 30rpx 0 0 30rpx; font-size: 32rpx;">
										待结算
										<view class="small-size" style="padding: 20rpx 0;margin: 0 auto;color: #ccc;">
											订单已完成，等待客户进行结算支付
										</view>
									</view>
								</view>
							</block>
							<!-- 		<view class="w94" style="padding: 20rpx 30rpx;margin: 0 auto;font-size: 24rpx;color: #ccc;">
								您已接单，待上门服务
							</view> -->
							<view class="flex" style="padding: 0 20rpx;">
								<image src="@/static/lg.png"
									style="width: 140rpx;height: 140rpx;margin: 20rpx; border: 1px solid;border-radius: 16rpx;"
									mode=""></image>
								<view class=""
									style="display: flex;flex-direction: column;justify-content: space-evenly;">
									<view style="font-size: 28rpx;">橱柜</view>
									<view style="font-size: 24rpx;color:#ccc">服务内容:维修</view>
									<view style="font-size: 24rpx;color:#ccc">下单时间:2012-12-01</view>
								</view>
							</view>
							<u-line></u-line>
							<view class="tag">
								<u-tag text="售后详情" color="#000" borderColor="transparent" shape="circle"
									bg-color="#CEEE5B" @click="make(item)"></u-tag>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<view class="content" style="min-height: 500rpx; " v-else>
			<view class="flex-center">
				<image src="@/static/order/empty.png" mode="" style="width: 400rpx; height: 320rpx;"></image>
			</view>
			<view class="" style="text-align: center;">
				内容为空
			</view>
		</view>
		<!-- <view class="content" style="min-height: 500rpx;" v-else>
			<view class="card w96">
				<view class="w96 radius20 bgwhite mt20" style="padding: 0 20rpx 20rpx 0rpx;">
					<view class="w94" style="padding: 30rpx 0 0 30rpx;font-size: 32rpx;">
						待服务
					</view>
					<view class="w94" style="padding: 20rpx 30rpx;margin: 0 auto;font-size: 24rpx;color: #ccc;">
						您已接单，待上门服务
					</view>
					<view class="flex" style="padding: 0 20rpx;">
						<image src="@/static/lg.png"
							style="width: 140rpx;height: 140rpx;margin: 20rpx; border: 1px solid;border-radius: 16rpx;"
							mode=""></image>
						<view class="" style="display: flex;flex-direction: column;justify-content: space-evenly;">
							<view style="font-size: 28rpx;">橱柜</view>
							<view style="font-size: 24rpx;color:#ccc">服务内容:维修</view>
							<view style="font-size: 24rpx;color:#ccc">下单时间:2012-12-01</view>
						</view>
					</view>
					<u-line></u-line>
					<view class="tag">
						<u-tag text="售后详情" color="#000" borderColor="transparent" shape="circle" bg-color="#CEEE5B"
							@click="make"></u-tag>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		refund_order
	} from '@/common/teacherReq.js'
	import mytabs from '@/components/mytabs.vue';
	export default {
		data() {
			return {
				list: [{
						name: '全部',
						index: 1
					},
					{
						name: '处理中',
						index: 2

					},
					{
						name: '已完结',
						index: 3
					},
					{
						name: '关闭',
						index: 4
					}
				],
				current: 1,
				dataList: [],
				total: 0,
				page: 0
			};
		},
		components: {
			mytabs
		},
		methods: {
			onTabSelected(e) {
				if (e.index == this.current) return
				this.current = e.index
				console.log('e: ', e);
				this.dataList = []
				this.requestList()
			},
			make(item) {
				// console.log('item: ',item);
				uni.navigateTo({
					url: '/subpack/order/detail?id=' + item.id
				})
			},
			requestList() {
				refund_order({
					type: this.current,
					page: this.page
				}).then(res => {
					// this.orderList = this.orderList.concat(res.data.order_list)
					console.log('res: ', res);
					if (res.data.order_list.length) {
						this.dataList = this.dataList.concat(res.data.order_list)
						this.total = res.data.total
					} else {
						this.isNull = true
					}
				})
			},
			scrolltolower() {
				if (this.isNull) {
					uni.showToast({
						title: '没有更多了',
						icon: 'error'
					})
					return
				}
				this.page += 1
				this.requestList()
			}
		},
		onLoad() {
			this.requestList()
		}
	}
</script>

<style lang="scss">
	.tag {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		margin-top: 20rpx;
	}
</style>